{% include "header.html" %}

<div class="container">

    {% if messages %}
    {% for message in messages %}
    <div class="alert alert-success">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <span class="glyphicon glyphicon-ok"></span> {{ message }}
    </div>
    {% endfor %}
    {% endif %}

    <!-- introduce tabs, refer to http://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp -->
    <!--<ul class="nav nav-tabs">-->
    <ul class="nav nav-pills nav-justified">
        <li class="active"><a data-toggle="tab" href="#studies">Studies</a></li>
        <li><a data-toggle="tab" href="#trials">Trials</a></li>
        <li><a data-toggle="tab" href="#configuration">Configuration</a></li>
        <li><a data-toggle="tab" href="#notebook">Notebook</a></li>
    </ul>

    <div class="tab-content text-center">

        <div id="studies" class="tab-pane fade in active">
            <h2>List Studies</h2>

            <table class="table table-striped table-hover table-condensed">
                <th class="text-center active">Id</th>
                <th class="text-center success">Name</th>
                <th class="text-center warning">Study Configuration</th>
                <th class="text-center danger">Algorithm</th>
                <th class="text-center info">Status</th>
                <th class="text-center active">Created Time</th>
                <th class="text-center success">Updated Time</th>
                <th class="text-center warning">Operation</th>

                {% for study in studies %}
                <tr>
                    <td class="text-center active"><a href="/dashboard/v1/studies/{{ study.id }}">{{ study.id }}</a>
                    </td>
                    <td class="text-center success">{{ study.name }}</td>
                    <td class="text-center warning">{{ study.study_configuration }}</td>
                    <td class="text-center danger">{{ study.algorithm }}</td>
                    <td class="text-center info">{{ study.status }}</td>
                    <td class="text-center active">{{ study.created_time }}</td>
                    <td class="text-center success">{{ study.updated_time }}</td>
                    <td class="text-center warning">
                        <input type="image" width="22px" src="/static/images/delete-icon.png" alt="Delete"
                               onclick="delete_resource('/dashboard/v1/studies/{{ study.id }}')"/>
                    </td>
                </tr>
                {% endfor %}

            </table>

            <hr/>
            <h2>Create Study</h2>

            <form action="/dashboard/v1/studies" method="post" onsubmit="return confirm('Do you want to create the
                  resource?');">
                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-2 col-form-label"><font color="red">*</font> Name </label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="name" placeholder="study" required="required">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-2 col-form-label"><font color="red">*</font> Study
                        Configuration
                    </label>
                    <div class="col-sm-10">
                        <textarea class="form-control" rows="15" cols="80" name="study_configuration"
                                  required="required">
{
	"goal": "MAXIMIZE",
	"randomInitTrials": 3,
	"maxTrials": 5,
	"maxParallelTrials": 1,
	"params": [
		{
			"parameterName": "hidden1",
			"type": "INTEGER",
			"minValue": 1,
			"maxValue": 10,
			"scallingType": "LINEAR"
		}, {
			"parameterName": "learning_rate",
			"type": "DOUBLE",
			"minValue": 0.01,
			"maxValue": 0.5,
			"scallingType": "LINEAR"
		}
	]
}
                        </textarea>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-2">
                        <label for="algorithm">Algorithm</label>
                    </div>
                    <div class="col-sm-10">
                        <select class="form-control" id="algorithm" name="algorithm">
                            <option>BayesianOptimization</option>
                            <option>RandomSearchAlgorithm</option>
                            <option>GridSearchAlgorithm</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <div align="center">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </form>

        </div>

        <div id="trials" class="tab-pane fade">
            <h2>List Trials</h2>

            <table class="table table-striped table-hover table-condensed">
                <th class="text-center active">Id</th>
                <th class="text-center success">Study Id</th>
                <th class="text-center warning">Name</th>
                <th class="text-center danger">Parameter Values</th>
                <th class="text-center info">Objective Value</th>
                <th class="text-center active">Status</th>
                <th class="text-center success">Created Time</th>
                <th class="text-center warning">Updated Time</th>
                <th class="text-center danger">Operation</th>

                {% for trial in trials %}
                <tr>
                    <td class="active"><a href="/dashboard/v1/studies/{{ trial.study_id }}/trials/{{ trial.id }}">{{ trial.id }}</a></td>
                    <td class="text-center success">{{ trial.study_id }}</td>
                    <td class="text-center warning">{{ trial.name }}</td>
                    <td class="text-center danger">{{ trial.parameter_values }}</td>
                    <td class="text-center info">{{ trial.objective_value }}</td>
                    <td class="text-center active">{{ trial.status }}</td>
                    <td class="text-center success">{{ trial.created_time }}</td>
                    <td class="text-center warning">{{ trial.updated_time }}</td>
                    <td class="text-center danger">
                        <input type="image" width="22px" src="/static/images/delete-icon.png" alt="Delete"
                               onclick="delete_resource('/dashboard/v1/studies/{{ trial.study_id }}/trials/{{ trial.id }}')"/>
                    </td>
                </tr>
                {% endfor %}

            </table>

            <hr/>
            <h2>Create Trial</h2>

            <form action="/dashboard/v1/trials" method="post" onsubmit="return confirm('Do you want to create the
                  resource?');">
                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-2 col-form-label"><font color="red">*</font> Study Id
                    </label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="study_id" placeholder="1" required="required">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-2 col-form-label"><font color="red">*</font> Name </label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="name" placeholder="trial" required="required">
                    </div>
                </div>
                <div class="form-group row">
                    <div align="center">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </form>

        </div>


        <div id="configuration" class="tab-pane fade">
            <h2>Configuration</h2>

            <table class="table table-striped table-hover table-condensed">
                <th class="text-center active">Attribute</th>
                <th class="text-center success">Value</th>

                <tr>
                    <td class="text-center active">System</td>
                    <td class="text-center success">{{ platform.system }}</td>
                </tr>
                <tr>
                    <td class="text-center active">Platform</td>
                    <td class="text-center success">{{ platform.platform }}</td>
                </tr>
                <tr>
                    <td class="text-center active">Machine</td>
                    <td class="text-center success">{{ platform.machine }}</td>
                </tr>
                <tr>
                    <td class="text-center active">Version</td>
                    <td class="text-center success">{{ platform.version }}</td>
                </tr>
                <tr>
                    <td class="text-center active">Processor</td>
                    <td class="text-center success">{{ platform.processor }}</td>
                </tr>
            </table>

        </div>

        <div id="notebook" class="tab-pane fade">
            <br/>
            <iframe src="http://127.0.0.1:8888" height="800" width="100%" style="border:none;" scrolling="yes"></iframe>
        </div>
    </div>

</div>

{% include "footer.html" %}
